<template>
  <BorderBox10 class="w-full h-full">
    <Title class="pt-4" :title="`每日新增用户`" />
    <div class="w-full h-80 mt-4 flex flex-row p-6 box-border gap-4">
      <div class="w-1/2 h-full">
        <Mid v-if="isShow" :line-data="line" @changeDate="changeDate" />
      </div>
      <div @mousemove="testMove" @mouseleave="testMend"  style="width:50% !important">
       
          <div class="w-full max-h-80 overflow-y-hidden" ref="roll">
            <div
              v-for="(item, index) in registrants_rank"
              :key="index"
              class="py-2"
            >
              <p
                class="lists w-full h-full leading-8 flex text-slate-300 flex-row text-base"
              >
                <span class="pr-4"> {{ index + 1 }}</span>
                <span class="flex-1"> {{ item.name }}</span>
                <span class="text-[#00FFFF]"> {{ item.count }}</span>
              </p>
            </div>
          </div>
       
      </div>
    </div>
  </BorderBox10>
</template>

<script setup>
import { BorderBox10, Decoration8 } from "@kjgl77/datav-vue3";
import { defineProps, ref, watch ,onBeforeUnmount, onUnmounted, nextTick } from "vue";

import Mid from "@/view/memberManager/components/mid.vue";
import Title from "@/view/memberManager/components/title.vue";
const props = defineProps({
  line: {
    type: Object,
    default: () => {},
  },
  isShow: {
    type: Boolean,
    default: false,
  },
});
// ref绑定初始化
const roll = ref(null);
// 定时器初始化
const timer = ref(null);

const testMove = () => {
  clearTimeout(timer.value);
};
const testMend = () => {
  start();
};

onBeforeUnmount(() => {
  // 清除定时器
  clearTimeout(timer.value);
});
onUnmounted(() => {
  // 清除定时器
  clearTimeout(timer.value);
});

const start = () => {
  // 清除定时器
  clearTimeout(timer.value);
  // 定时器触发周期
  const speed = ref(75);
  timer.value = setInterval(MarqueeTest, speed.value);
};
function MarqueeTest() {
  let test1 = roll.value
  // 判断组件是否渲染完成
  if (test1.offsetHeight == 0) {
    test1 = roll.value
  } else {
    // 如果列表数量过少不进行滚动
    if (test1.childNodes.length < 6) {
      clearTimeout(timer.value)
      return
    }
    // 组件进行滚动
    test1.scrollTop += 1
    // 判断滚动条是否滚动到底部
    if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
      // 获取组件第一个节点
      const a = test1.childNodes[0]
      // 删除节点
      test1.removeChild(a)
      // 将该节点拼接到组件最后
      test1.append(a)
    }
  }
}

// 启动定时器
start()

nextTick(() => {
  start()
})
const registrants_rank = ref([]);

const activeDate = ref("");

const changeDate = (date) => {
  let values = [];
  var registrants_rank_value = [];
  if (!date || date === activeDate.value) {
    for (const key in props.line) {
      values.push(...props.line[key]);
    }
  } else {
    values = props.line[date];
    activeDate.value = date;
  }
  values?.forEach((item) => {
    registrants_rank_value.push(item);
  });
  registrants_rank.value = registrants_rank_value;
};

watch(
  () => props.line,
  () => {
    changeDate();
  }
);
</script>

<style scoped>
.lists {
  border-bottom: 1px solid #53749c;
}
@keyframes scroll {
  0%{
    transform: translateY(0);
  }
  100% {
    transform: translateY(-175%);
  }
}
</style>
